/* Note: We use a mix of "em" and "rem" dimensions throughout this css.
Therefore adjusting body font size will alter any media queries and other dimensions that are based on "em".
Feel free to change but be aware of possible unintended consequences :) */
/* TNZ fonts */
/* LF light */
@font-face {
font-family: 'NationalWebLF-Light';
src: url("https://dwvt5wwshu97q.cloudfront.net/uploads/201/themes/412/fonts/NationalWebLF-Light.eot") format("eot"),
url("https://dwvt5wwshu97q.cloudfront.net/uploads/201/themes/412/fonts/NationalWebLF-Light.woff") format("woff");
font-weight: 200;
font-style: normal;
}
/* LF regular */
@font-face {
font-family: 'NationalWebLF-Regular';
src: url("https://dwvt5wwshu97q.cloudfront.net/uploads/201/themes/412/fonts/NationalWebLF-Regular.eot") format("eot"),
url("https://dwvt5wwshu97q.cloudfront.net/uploads/201/themes/412/fonts/NationalWebLF-Regular.woff") format("woff");
font-weight: 300;
font-style: normal;
}
/* regular */
@font-face {
font-family: 'NationalWeb-Regular';
src: url("https://dwvt5wwshu97q.cloudfront.net/uploads/201/themes/412/fonts/NationalWeb-Regular.eot") format("eot"),
url("https://dwvt5wwshu97q.cloudfront.net/uploads/201/themes/412/fonts/NationalWeb-Regular.woff") format("woff");
font-weight: 300;
font-style: normal;
}
/* semibold */
@font-face {
font-family: 'NationalWeb-Semibold';
src: url("https://dwvt5wwshu97q.cloudfront.net/uploads/201/themes/412/fonts/NationalWeb-Semibold.eot?v=63869116596") format("eot"),
url("https://dwvt5wwshu97q.cloudfront.net/uploads/201/themes/412/fonts/NationalWeb-Semibold.woff?v=63869116580") format("woff");
font-weight: 400;
font-style: normal;
}
/* Pure Pakati */
@font-face {
font-family:'PurePakatiWeb';
src: url("https://dwvt5wwshu97q.cloudfront.net/uploads/201/themes/412/fonts/PurePakatiWeb-Regular2.eot?v=63881925083") format("eot"),
url("https://dwvt5wwshu97q.cloudfront.net/uploads/201/themes/412/fonts/PurePakatiWeb-Regular2.woff?v=63881924995") format("woff");
font-weight: normal;
font-style: normal;
}
.body {
font-family: 'NationalWebLF-Light', Helvetica, Arial, sans-serif;
font-size: 2.1rem;
line-height:1.3;
}
h1, h2, h3, h4 {
font-family: 'NationalWebLF-Regular', Helvetica, Arial, sans-serif;
margin: 0;
}
h1 {
font-size: clamp(1.5em, 4vw, 2.75em);
}
h1.purepakati {
font-family:'PurePakatiWeb', sans-serif;
font-size:9rem;
line-height:1.1;
font-kerning:auto;
font-feature-settings: "liga" 1, "calt" 1, "dlig" 1;
font-weight:normal;
font-smothing:antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
p {
margin:0; /* p reset */
margin-bottom:1em;
}
.lead {font-size:1.3em;}
.center {text-align:center;}
small {
color: #777;
font-size: 65%;
font-weight: 200;
}
.red {color:red;}
b, strong {
font-family: 'NationalWebLF-Regular', Helvetica, Arial, sans-serif;
}:root {
--primary-color: #f7f7f7;
--secondary-color: #212121;
--lightgrey: #efefef;
--darkgrey: #646464;
--navbg: #000000;
--navcol: #ffffff;
--linkcol: #000;
--darkgreen: #3c8637;
--green: #21882f; /* TNZ green */
}
/* root variables cannot be used in media queries so here for reference only:
36em/57.6rem phone (Small devices (landscape phones, 576px and up)
48em/76.8rem tablet (Medium devices (tablets, 768px and up)
62em/99.2rem desktop (Large devices (desktops, 992px and up)
75em/120rem large desktop (Large devices (desktops, 1200px and up)
120em/192rem Pro/designer desktop (Large devices (desktops, 1920px and up, e.g. most pro design screens)
*/
/* ---------------------------------
Navbar styles
--------------------------------- */
.navbar-section {
padding-top: 0;
padding-bottom: 0;
/* navbar account name color */
color: var(--navcol);
/* navbar color */
background-color: var(--navbg);
/* navbar border at the bottom */
/* temp remove border-bottom: 5px solid var(--green); */
}
/* navbar icons text color */
.navbar-section .selection-count,
.navbar-section .avatar-user-dropdown{
color: var(--navcol);
}
/* navbar user dropdown border color */
.navbar-section .avatar-user-dropdown{
border-color: var(--navcol);
}
/* hamburger menu for mobile */
svg.hamburger-menu g path {stroke:var(--navcol);}
/* navbar icons color */
.navbar-section .svg-stroke path,
.navbar-section .svg-stroke line {
stroke: var(--navcol);
}
/* my profile circular border */
.navbar-section .avatar-user-dropdown {
border-color: var(--navcol);
}
/* navbar icons color */
.navbar-section .svg-fill path{
fill: var(--navcol);
}
/* navbar icon text color */
.nav-icon-text {
color:var(--navcol);
}
/* navbar links */
.navbar-section-content a {
color: var(--navcol);
font-size: 1.8rem;
line-height: 2.4rem;
}
/* Hide logo and account name on mobile */
.account-logo .logo {
display: none;
max-height: 4rem;
}
.account-logo-mobile {
top: auto;
left: calc(50% - 9rem);
width: 16rem;
height: auto;
}
span.account-name {
font-size: 1.6rem;
display: none;
}
/* mobile menu */
@media screen and (max-width: 62em) {
.navbar-section-content {
background: var(--navbg);
color: var(--navcol);
}
.navbar-section-content a {
padding: 1rem;
width: 100%;
}
.nav-close-burger-menu svg path {
fill: var(--navcol);
}
}
/* apply hover to both mobile and desktop */
.navbar-section-content a:hover {
background-color: var(--green);
opacity: 1;
}
@media screen and (max-width: 72em) {
/* fix overflow by collapsing user actions menu */
.navbar-button.search-button,
.navbar-button.contribute-button,
.navbar-button.icon-admin,
.navbar-button.icon-contribute,
.navbar-locale-dropdown {
display: none;
}
}
@media (min-width: 62em) {
/* Adjust height and spacing for logo on desktop */
.navbar-section {
height: 10rem;
}
.navbar-section-content {
gap: 1rem;
align-self: flex-end;
}
.navbar-section-content a {
line-height: 8rem;
padding: 0 1rem;
border-radius: 0.5rem 0.5rem 0 0;
}
.account-logo .logo,
span.account-name {
display:block;
max-height:10rem;
padding:0;
}
/* start main */
.main {margin-top:10rem;}
.preview-mode .main {padding-top: 6rem;} /* add additional space when preview bat is active */
}
/* Changed from max-width 62em to fix navbar overflow */
@media screen and (max-width: 85.5em) {
/* CSS rules to hide certain navbar elements and display the hamburger menu */
.navbar-button.search-button,
.navbar-button.contribute-button,
.navbar-button.icon-admin,
.navbar-button.icon-contribute,
.navbar-locale-dropdown {
display: none;
}
}
/* Navbar overflow with open basket
.open-basket .navbar-section-content {
gap: 1.5rem;
display: flex;
flex-direction: column;
position: fixed;
background: var(--navbg);
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2;
align-items: flex-start;
justify-content: flex-start;
padding: 2rem;
transform: translate(-100%);
transition: all .5s ease;
width: 75%;
}*/
/* custom scrollbar (not supported in Firefox) */
::-webkit-scrollbar {
width: 1.5rem;
}
::-webkit-scrollbar-track {
background: #000;
}
::-webkit-scrollbar-thumb {
background: #fff;
border: 1px solid #000;
border-radius: 0.5rem;
}
::-webkit-scrollbar-thumb:hover {
background: #ccc;
cursor: pointer;
}
.navbar-button.contribute-button {display:none;}
/* fix for download modal inheriting navbar color */
.download-modal-content {
color: var(--darkgrey);
}
/*-- hide Contribute button from user dropdown menu--*/
#user-dropdown a:nth-child(10) {color:red; display:none;}.footer-section {
background-color: black;
color: white;
padding: 2rem 10%;
}
.footer-top {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: minmax(min-content, max-content);
grid-column-gap: 3rem;
align-items: flex-start;
margin-bottom: 4rem;
}
.footer-top article {
display: grid;
grid-auto-rows: minmax(min-content, max-content);
}
.footer-top article ul {list-style: none; padding: 0;}
.footer-top article li {
width: 100%;
display: block;
text-align: center;
color: #939598;
font-size: 1.6rem;
line-height: 3.2rem;
text-align: left;
white-space: nowrap;
}
.footer-top article li a {text-decoration:none;}
.footer-top article li.heading {color: #fff;}
.footer-logo {
max-width: 26rem;
margin: 0;
}
.footer-four-col {
grid-template-columns: 1fr;
align-items: flex-start;
border-top: 1px solid #444;
}
@media screen and (min-width:62em) {
.footer-top {
grid-template-columns: 4fr 1fr;
}
.footer-top article li {
width: fit-content;
}
.footer-logo {
margin: 4rem 0;
}
.footer-four-col {
display: grid;
/* four column grid */
grid-template-columns: 1fr 1fr 2fr 1fr;
grid-template-areas: 'menu-1 menu-2 menu-3 socials';
grid-auto-rows: minmax(min-content, max-content);
grid-column-gap: 4rem;
border: none;
}
.menu-1, .menu-2, .menu-3, .socials {
width: 100%;
display: flex;
flex-direction: column;
margin: 4rem 0;
}
}
.socials a {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5rem;
}
.css-icon-twitter {
background-image: url('data:image/svg+xml,');
}
.css-icon-facebook {
background-image: url('data:image/svg+xml,');
}
.css-icon-youtube {
background-image: url('data:image/svg+xml,');
}
.css-icon-youtube,
.css-icon-facebook,
.css-icon-twitter {
width: 20px;
height: 20px;
background-repeat: no-repeat;
}/* ---------------------
Main Elements
--------------------- */
.body {
background-color: var(--primary-color);
}
/* top spacing */
@media screen and (min-width: 62em) {
.body .main {
margin-top: 10rem;
}
}
.main {margin-top: 7rem;}
.preview-mode .main {padding-top: 6rem;}
.welcome-paragraph {
font-size:2rem;
}
mark {
padding: 1rem 2rem;
background-color: #f9d147;
color: black;
}
/* fix code wrapping on mobile */
pre {
font-family: monospace,monospace;
font-size: 1em;
max-width: 100%;
overflow: auto;
white-space: normal;
}
/* ----------------
Search widget
---------------- */
@media screen and (max-width: 36em) {.search-box input{font-size: 80%;}}
/* search box rounded corners */
.search-box {
border-radius: 0.5rem;
}
/* Styles for the 'assets-button' */
.assets-button {
content: '';
background-color: var(--green);
position: absolute;
right: -1px;
top: -1px;
display: flex;
align-items: center;
justify-content: center;
height: 6rem;
min-width: 6rem;
padding: 1rem 2rem;
cursor: pointer;
color: #fff;
background-image: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100" height="100" viewBox="0 0 50 50" fill="%23fff"%3E%3Cpath d="M 21 3 C 11.601563 3 4 10.601563 4 20 C 4 29.398438 11.601563 37 21 37 C 24.355469 37 27.460938 36.015625 30.09375 34.34375 L 42.375 46.625 L 46.625 42.375 L 34.5 30.28125 C 36.679688 27.421875 38 23.878906 38 20 C 38 10.601563 30.398438 3 21 3 Z M 21 7 C 28.199219 7 34 12.800781 34 20 C 34 27.199219 28.199219 33 21 33 C 13.800781 33 8 27.199219 8 20 C 8 12.800781 13.800781 7 21 7 Z"%3E%3C/path%3E%3C/svg%3E');
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
border-radius: 0 0.5rem 0.5rem 0;
}
/* Hover effect */
.assets-button:hover {
background-color: #2d2d2d;
}
/* custom styles for TNZ header area */
.search-section {
background-color: #2d2d2d;
margin: 0;
padding: 0;
}
.CreditView .search-section {
background-color: transparent;
}
.CreditView section.search-box-section {
padding: 6rem 10%;
}
#index section.search-box-section {
padding: 0;
}
section.search-box-section {
padding: 0 10% 6rem;
}
section.filters-section {
padding: 2rem 10%;
background-color: #2d2d2d;
color: #fff;
}
section.filters-section .filter-name-value {
color: #ccc;
text-transform: uppercase;
font-size: 1.8rem;
padding-right: 1rem;
}
/* Position the options section */
.filter-options {
position: absolute;
top: 100%; /* Position below the filter header */
left: 0;
display: none;
color: #2d2d2d;
font-weight: bold;
font-size: 1.8rem;
max-width: 100%;
}
.filter-options .filter-option.selected {
color: var(--green);
background-color: transparent;
}
.filter-all-option {
border-bottom: none;
}
.filter-option:hover {
background-color: var(--green);
color: #fff;
}
.filter-option .css-icon,
.filter-option .icon {
display: none;
}
.filter-name {
display: flex;
align-items: center;
justify-content: space-between;
}
.filter-name .icon-caret-down path {
stroke: #ccc;
}
.hide-filters-button, .show-filters-button {color: #ccc;}
.hide-filters-button svg path, .show-filters-button svg path {stroke: #ccc;}
.search-label {
display: none;
}
.filters {
justify-content: flex-start;
}
.search-grid-section .page-actions,
.search-grid-section .grid,
.search-grid-section .assets-pagination {
background-color: var(--primary-color);
padding-bottom:4rem;
}
.change-grid-view .icon-text {
display: none;
}
.file-icon::before{
border-color: var(--primary-color) var(--primary-color) rgba(255, 255, 255, .3) rgba(255, 255, 255, .35);
}
/* ----------------
Masonry view
----------------- */
.masonry-asset {
margin-bottom: 2rem;
background-color: white;
padding: 0;
float: left;
}
.masonry-asset:hover {opacity:0.6;}
.masonry-asset .asset-grid-icon {position:relative;}
.masonry-asset .asset-grid-name {margin-left:0;}
/* ------------
Feed view
---------------- */
.feed-view .asset-name {
text-align:left;
justify-content:left;
}
.feed-view .asset-grid-name {
font-size: 1.2em;
text-align:left;
font-weight:bold;
}
.feed-view .feed-asset-type-icon {display:none;}
/* ------------
Gallery
------------ */
/*-- Mobile --*/
.gallery-link,
.gallery-image {
height: 8rem;
}
/*-- Desktop --*/
@media (min-aspect-ratio: 1/1) {
.gallery-link,
.gallery-image {
height: 16rem;
}
}
/* --------------
Home Page
-------------- */
.intro-logo {
max-width:20rem;
}
/* custom social links article */
.social-links {margin-top:5em;}
.social-links a {font-size:2rem;padding:1rem 2rem;}
/* end */
/* fix download form terms field separation issue */
.form-checkbox.terms {
margin: 5rem 0;
}/* Layout and basic styles of Asset Detail Page */
.asset .asset-name {
color: var(--green);
font-weight: bold;
}
.albums-section-title{
display: none;
}
.asset-page-wrapper {
padding: 2rem 2em;
}
@media (min-width:768px) {
.asset-page-wrapper {
padding: 6rem 6em;
}
}
.asset-data{
margin-top: 1rem;
}
.asset-data,
.asset-buttons{
text-align: center;
}
button.asset-action {color:#000;}
.asset-info span:not(.asset-id, .asset-source):before {
content: ' | ';
}
.asset-source:before {
content: 'src: ';
}
.asset-page-wrapper.post .asset-proxy-section,
.asset-page-wrapper.post .asset-details-section,
.asset-page-wrapper.post .asset-tags-section{
max-width: 90rem;
margin: auto;
width: 100%;
}
.asset-page-wrapper.post .asset-proxy-section{
margin-top:2rem;
}
.asset-tags-title,
.asset-type-title,
.asset-size-title,
.asset-filename-title,
.asset-dimensions-title,
.asset-type-value,
.asset-extension-title,
.asset-release-date,
.asset-created-at,
.asset-id-title,
.asset-licence-title,
.asset-word-count-title{
display:none;
}
.asset-licence-value:before{
content: ' -';
margin-right: 0.5rem;
}
.asset-licence-subtitle:after,
.asset-expiry-date-title:after,
.asset-created-at-title:after,
.asset-release-date-title:after,
.asset-credit-title:after,
.asset-usage-title:after{
content:':';
}
.AssetView .asset-title {
font-size: 2rem;
flex: 0 0 100%;
}
.asset-page-main .asset-type,
.asset-page-main .asset-size,
.asset-page-main .asset-extension,
.asset-page-main .asset-id{
width: 33%;
display: inline;
}
.asset-details-section {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.asset-details-section article {
flex: 1;
flex: 0 0 100%;
}
.asset-details-section .asset-type,
.asset-details-section .asset-size,
.asset-details-section .asset-dimensions,
.asset-details-section .asset-extension,
.asset-details-section .asset-id,
.asset-details-section .asset-word-count{
flex: 0 0 content;
}
.asset-type-icon,
.asset-license-icon,
.asset-expiry-date-icon,
.asset-created-at-icon,
.asset-release-date-icon,
.asset-credit-icon,
.asset-usage-icon,
.asset-reference-icon,
.asset-location-icon {
float: left;
margin-right: 1rem;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
}
.AssetView .asset-extension:before,
.AssetView .asset-id:before,
.AssetView .asset-size:before,
.AssetView .asset-dimensions:before,
.AssetView .asset-word-count:before{
content: ' | ';
margin-left: 0.5rem;
}
.AssetView .asset-id:before {
content: '#';
margin-right: -0.4rem;
}
/* removed 10 Jun as now appears to be added as HTML by the server
.AssetView .asset-placename:after,
.AssetView .asset-city:after,
.AssetView .asset-region:after {content:','}
*/
.AssetView .asset-latitude:before {
content:'Latitude: ';
}
.AssetView .asset-longitude:before {
content:'Longitude: ';
}
/* Margins and paddings */
.AssetView .asset-details-section article {
margin-bottom: 1.2rem;
}
.asset-page-wrapper .section{
padding: 0;
}
.asset-tags{
margin-top: 3rem;
}
/* added to solve tag wrapping */
.asset-tags a {
font-size: 1.8rem;
line-height: 1.8rem;
float: left;
margin: 0 0.8rem 1.2rem 0;
}
.asset-term-of-use{
margin-top: 1rem;
}
.AssetView .asset-body {
margin-bottom: 1.8rem;
}
.asset-body p {
margin: 0;
}
.AssetView .asset-type-icon {
order: 2;
margin-bottom: 1.2rem;
flex: unset;
align-self: center;
}
.AssetView .asset-name {
order: 1;
width: 100%;
}
.AssetView .asset-id {
order: 3;
}
.AssetView .asset-extension {
order: 4;
}
.AssetView .asset-word-count {
order: 4;
}
.AssetView .asset-size {
order: 5;
}
.AssetView .asset-dimensions {
order: 6;
}
.AssetView .asset-description {
order: 7;
}
.AssetView .asset-licence {
order: 8;
}
.AssetView .asset-terms-of-use {
order: 9;
padding-bottom: 1rem;
}
.AssetView .asset-expiry-date {
order: 10;
}
.AssetView .asset-release-date {
order: 11;
}
.AssetView .asset-created-at {
order: 12;
}
.AssetView .asset-credit {
order: 13;
}
.AssetView .asset-usage {
order: 14;
}
.AssetView .asset-reference {
order: 15;
}
.AssetView .asset-account {
order: 15;
}
.AssetView .asset-location {
order: 16;
}
/* adds some separation to the related assets section in Portal */
.related-assets-section {
border-top:1px dotted #ccc;
margin-bottom:5em;
}
/* move proxy in assets to top in mobile but preserve post positioning */
.asset-page-wrapper .section.breadcrumb-section {padding:1em 0;}
.asset-page-wrapper {
grid-template-areas: "breadcrumb breadcrumb breadcrumb" "proxy proxy proxy" "details details details" "tags tags tags" "actions actions actions";
}
.asset-page-wrapper.post {
grid-template-areas: "breadcrumb breadcrumb breadcrumb" "proxy proxy proxy" "tags tags tags" "actions actions actions";
}
@media (min-width:36em) {
.asset-page-wrapper .section.breadcrumb-section {padding:0;}
.asset-proxy-section {
margin-right: 5rem
}
.asset-page-wrapper .section.breadcrumb-section {padding:0;}
.asset-page-wrapper {
grid-template-areas: "breadcrumb actions actions" "proxy proxy details" "proxy proxy tags";
}
.asset-page-wrapper.post {
grid-template-areas: "breadcrumb actions actions" "proxy proxy proxy" "tags tags tags";
}
/* Fix content when basket is open
.open-basket .asset-page-wrapper {
grid-template-areas: "breadcrumb breadcrumb breadcrumb" "proxy proxy proxy" "details details details" "tags tags tags" "actions actions actions";
}
.open-basket .asset-page-wrapper.post {
grid-template-areas: "breadcrumb breadcrumb breadcrumb" "proxy proxy proxy" "tags tags tags" "actions actions actions";
}
.open-basket .asset-actions-section {
margin-top: 2rem;
justify-content: flex-start;
}*/
}
/* stop right click save */
img.proxy-preview {
pointer-events: none;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* chnage colour of tags on Asset Page to TNZ green */
.tag.selected-tag {
background-color: var(--green);
color: #fff;
white-space: nowrap;
margin:.2rem
}/* Sign Up Page styles */
.new-account-section .form-section {
background-color:transparent;
padding:0;
}
.new-account-hint {font-size:2.5rem;}
.new-account-section .form-section form {
background-color:antiquewhite;
border-radius:1em;
padding:1em;
}
@media screen and (min-width: 75em) {
.new-account-section .form-section {
width: 33vw;
min-width:30em;
margin:1em auto;
background-color:transparent;
}
.new-account-section .form-section form {
background-color:antiquewhite;
border-radius:1em;
padding:2em;
}
.new-account-section .new-account-embeded-image {
padding:3rem;
max-width:66vw;
}
blockquote {padding:2em;}
blockquote span {
display:block;
width:100%;
font-size:2.2rem;
font-weight:bold;
}
blockquote cite {
display:block;
width:100%;
font-size:1em;
text-align:center;
}
.signup-faq {
margin:2.5%;
text-align:left!important;
padding-top:1em;
}
}
/* bird element for animated password focus */
.login-password {
display: flex;
flex-direction: column;
}
/* Default bird image */
.login-password::before {
content: "";
position: absolute;
width: 56px;
height: 48px;
background-image: url('https://dwvt5wwshu97q.cloudfront.net/accounts/201/static_files/4D2TB42NCY9DSSMGESRB6SWD5J/bird-standard.png?v=63869556494');
background-size: cover;
align-self: flex-end;
margin-top: -1.4rem;
transition: background-image 0.3s ease; /* Transition for smoother effect */
}
/* Change bird image when input within .login-password is in focus */
.login-password:focus-within::before {
content: "";
background-image: url('https://dwvt5wwshu97q.cloudfront.net/accounts/201/static_files/459DVWS9X88CZ8FYENCCM7TXFT/bird-animated.gif?v=63869556489');
}.desktop {display:none;}
@media screen and (min-width: 62em){
.desktop {display:block;}
.mobile {display:none;}
}
/* faq styles */
dl {
column-count: 1;
column-gap: 0rem;
}
.fw dl {
column-count: 1;
column-gap: 0rem;
}
@media (min-width:48em) {
dl {
column-count: 2;
column-gap: 5rem;
}
.fw dl {
column-count: 3;
column-gap: 5rem;
}
}
dt {font-weight:bold;}
dt.subtitle {
border-bottom: 2px solid #000;
margin:2rem 0;
}
dt.subtitle:first-child {
border-bottom: 2px solid #000;
margin:0 0 2rem 0;
}
dd {margin-bottom:1rem;}
.bk-wall .brandkit-logo,
.bk-wall .logo {
max-height: 20rem;
}
@media screen and (min-width: 36em) {
.bk-wall {
margin: 10em auto 4em auto;
padding:3rem 6rem
}
}
@media screen and (min-width: 48em) {
.bk-wall {
margin: 10em 4em;
}
}
.reset-password-section {
background-color:#fff;
width:fit-content;
margin:0 4em;
}
.registration-hint .login-button {color: #111; background-color: transparent;}/* full width section */
.fw {padding:4em 0;}
@media (min-width:77rem) {
.fw {
width:100vw;
padding:4em 0;
}
}
/* full height section */
.fh {
padding-top:0;
padding-bottom:0;
}
/* two column grids used throughout site */
.two-col-grid {
display:grid;
grid-template-columns: 1fr;
grid-auto-rows: minmax(min-content, max-content);
grid-column-gap: 2em;
grid-row-gap:2em;
}
.two-col-grid article {
display:grid;
grid-auto-rows: minmax(min-content, max-content);
}
/* Tablet Breakpoint 768px / 16px = 48em */
@media (min-width:48em) {
.two-col-grid {
display:grid;
grid-template-columns: 1fr 1fr;
grid-column-gap: 6em;
grid-row-gap:6em;
}
.two-col-grid h1, .two-col-grid h2 {
}
}
/* end 2 col grid */
/* 3 column grids used throughout site */
.three-col-grid {
display:grid;
grid-template-columns: 1fr;
grid-auto-rows: minmax(min-content, max-content);
grid-column-gap: 2em;
grid-row-gap: 2em;
}
.three-col-grid article {
display:grid;
grid-auto-rows: minmax(min-content, max-content);
}
/* Tablet Breakpoint 768px / 16px = 48em */
@media (min-width:48em) {
.three-col-grid {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 4em;
grid-row-gap:4em;
}
}
/* Desktop Breakpoint 1200px / 16px = 75em*/
@media (min-width:75em) {
.three-col-grid {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 4em;
grid-row-gap:4em;
}
.three-col-grid h1, .three-col-grid h2 {
}
}
/* end 3 col grid */
/* 4 column grids used throughout site */
.four-col-grid {
display:grid;
grid-template-columns: 1fr;
grid-auto-rows: minmax(min-content, max-content);
grid-column-gap: 2em;
grid-row-gap: 2em;
}
.four-col-grid article {
display:grid;
grid-auto-rows: minmax(min-content, max-content);
}
/* Desktop Breakpoint 768px / 16px = 48em */
@media (min-width:48em) {
.four-col-grid {
display:grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 2em;
grid-row-gap:2em;
}
}
/* Desktop Breakpoint 1200px / 16px = 75em */
@media (min-width:75em) {
.four-col-grid {
display:grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-column-gap: 2em;
grid-row-gap:2em;
}
}
/* end 4 col grid */
section .intro, #intro {
text-align:center;
}
section.blackbg {
background-color: #121212;
color: #fff;
}
section.whitebg {
background-color: #fff;
color: #000;
}
section.html-section.landing-page-header {
background-color: #2d2d2d;
color: #fff;
padding-top: 3rem;
padding-bottom: 0;
display: flex;
flex-direction: column;
}
.landing-page-header a {
display: flex;
gap: 1rem;
text-decoration: none;
}
.landing-page-header a:hover {
text-decoration: underline;
}
/* reset section padding on occasion */
.tight-bottom {padding-bottom:0;}
.tight-top {padding-top:0;}
.tight-left {padding-left:0;}
.tight-right {padding-right:0;}
/* html section */
.html-section,.albums-section,.search-box-section {
width:100vw;
padding-top:6rem;
padding-left:2em;
padding-right:2em;
padding-bottom:6em;
}
section.search-box-section {
padding-bottom: 1rem;
}/* added to adjust filters under TNZ search boxes on several pages */
.html-section img {margin:2em auto;}
.html-section p img {margin:0 auto;}
.html-section:first-child {padding-top:12rem;}
@media (min-width:62em) {
.html-section,.albums-section,.search-box-section {
padding-left: 10vw;
padding-right: 10vw;
}
.html-section .licences {
justify-content: center;
align-items: flex-end;
gap: 4rem;
}
.html-section .toolkits {
flex-direction: row;
justify-content: center;
align-items: flex-end;
}
.html-section .toolkits a {
width: 25vw;
}
section.html-section.landing-page-header {
flex-direction: row;
align-items: flex-end;
justify-content: space-between;
}
}
.search-box-content-text {
text-shadow: none;
margin-bottom: 4rem;
}
#mobile-searchbox .search-box-content-text {
margin: 0;
}
#mobile-searchbox .search-box-content-text h1 {
font-size: 4rem;
line-height: 10vw;
}
#mobile-searchbox .search-box-content-text h2 {
font-size: 2.2rem;
line-height: 8vw;
}
.licences {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 2rem;
flex-wrap: wrap;
}
.licences a {
font-size: 1.6rem;
text-decoration: none;
}
.licences img {
margin: auto;
max-width: 13rem;
}
.toolkits {
display: flex;
flex-direction: column;
}
.toolkits a {
padding: 0;
margin: auto;
width: 80%;
text-decoration: none;
}
.toolkits img {
max-height: 40rem;
}
.toolkits h3 {
color: var(--green); /* TNZ green */
line-height: 3rem;
}
/* about page */
#about-section .three-col-grid div a {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
text-decoration: none;
max-width: 36rem;
margin: auto;
}
#about-section .three-col-grid div a h4 {
color: var(--green);
}
#about-section .three-col-grid div a p {
margin: 0;
font-size: 2rem;
}
.breadcrumbs {
display: flex;
gap: 1rem;
font-size: 1.6rem;
align-items: center;
}
/* Styles for the flag text container */
.flag-text {
position: relative;
background-color: white;
color: #000;
padding: 0 1rem;
line-height: 3rem;
margin-right: 15px;
}
/* Styles for the flag shape (triangle) */
.flag {
position: absolute;
top: 0;
right: -15px; /* Adjust distance from the right */
width: 0;
height: 0;
border-top: 15px solid transparent; /* Adjust size as needed */
border-left: 15px solid white; /* Adjust size and color as needed */
border-bottom: 15px solid transparent; /* Adjust size as needed */
}
/* show the Search label and the And/Or toggle in the Search Grid - check render colour in each theme */
label.search-label {
display:block;
color:#fff;
/* padding-top:1em; */
}
.search-strategy .change-strategy-button {
padding-left: .5rem;
color: #ccc;
font-weight: normal;
font-size: 70%;
background: none;
border: none;
cursor: pointer;
}.button,
.normal-button {
color: #fff;;
background-color: #21882f; /* TNZ green */
padding: 1rem 2rem;
border-radius: 0.5rem;
}
.cancel-button, .cancel-my-account-button, .danger-button {
color:red;
text-decoration:underline;
background-color:#fff;}
.button-with-border {
color: #000;;
background-color: #fff;
border: 1px solid #000;
}
.edit-profile-button {
width:100%;
}
.normal-button.save-profile-changes-button,
.normal-button.save-profile-changes-button {
padding: 1rem 2rem;
}
a:hover,
.asset-add-to-basket-button:hover,
.clear-search-btn:hover {
opacity:0.6;
}
input {
border-radius: 0.5rem;
}
/* fix alignment on download button */
.download-button-section .button.normal-button {
align-items: center;
}
.asset-download-button,.login-button {
background-color:#121212;
color:#fff;
}
a.contrinute-button {display:none;}/* Albums widget */
.albums-grid .album {
aspect-ratio: 3 / 2; /* sets aspect ratio of album covers consistently when height is calculated */
width: 100%;
height: -webkit-fit-content;
}
#intro {padding-bottom: 4rem;}
.albums-grid .album-wrapper {gap: 1rem; padding: 0 0 4rem;}
.albums-grid .album-cover {background-color: #fff;}
.albums-grid .album-cover, .albums-horizontal-grid .album-cover {
min-height: auto;
}
.album-cover, .album-with-no-cover {
border: none;
}
.album-cover:hover, .album-with-no-cover:hover {
border: none;
}
.transparent {background: transparent;}
/* new album select state */
a.album-selected {
border: none;
box-shadow: none;
}
a.album-selected img, a.album-selected div.album-with-no-cover {
border:5px solid #f9d147;
box-shadow: 0 15px 25px 1px #ccc;
}
a.album-selected span.album-title {
color:#000;
font-weight:bold;
}
/* end album select state */
.albums-horizontal-grid .album-wrapper {
padding: 4rem 2rem 1rem;
grid-gap: 1rem;
}
.albums-horizontal-grid .album {
width: -webkit-max-content; /* added this to maintain column width */
}
.albums-horizontal-grid .album-cover {
border-radius:0.5rem;
width: 15rem;/* change aspect ratio */
height: 20rem;
object-fit: cover;
}
.albums-horizontal-grid .album-title {
width: 100%;
text-align:left;
}
/* tablet - rows of two */
@media screen and (min-width: 48em) {
.albums-grid .album {width: calc(50% - 1rem);}
.albums-horizontal-grid .album-cover {
border-radius:0.5rem;
width: 24rem;/* change aspect ratio */
height: 32rem;
object-fit: cover;
}
}
/* desktop - four col */
@media screen and (min-width: 62em) {
.albums-grid .album-wrapper {
max-width: 100%;
overflow-wrap: normal;
flex-wrap: wrap;
gap: 0;
}
.albums-horizontal-grid .album-cover {
border-radius:0.5rem;
width: 30rem;/* change aspect ratio */
height: 40rem;
object-fit: cover;
}
.albums-grid .album {width: 25%;}
}
section.albums-section {padding: 0;}
.albums-grid .album-title {
padding: 1rem 2rem 0;
text-align: left;
font-size: 2.6rem;
font-weight: bold;
}
.albums-grid .album-description {
padding: 0 2rem 2rem;
font-size: 1.8rem;
font-weight: bold;
color: var(--green);
width: 100%;
}/* specifically for Map section to be toggled on and off */
#map.advanced-section,
#mobile-map.advanced-section {
background-color: var(--green);
}
@media screen and (min-width: 75em) {
#map.advanced-section {
padding: 6rem 10%;
}
}
#mobile-map {padding: 0;}
/* Map grids used on Maps section only */
@media (min-width:62em) {
.map-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
/* end map grid */
/* map list */
ul.map_list {
padding: 0;
list-style: none;
font-size: 1.6rem;
line-height: 4rem;
}
ul.map_list p {
margin: 0;
padding-left: 1rem;
color: #ccc;
}
ul.map_list li a {
text-decoration: none;
color: #fff;
padding: 1rem;
white-space: nowrap;
border-radius: 0.5rem;
}
ul.map_list li a:hover {
background-color: #000;
color: #fff;
opacity: 1;
}
ul.map_list li a.map_selected {
background-color: #000;
}
/* map regions */
.map_region:hover {cursor: pointer;}
.map_region path {
fill: #fff;
/*transition: fill 0.1s ease;*/
}
.map_region.selected path {
fill: #000;
}
#Boundary path {
transform: translate(-27.4px, -17px);
stroke: #C4D1DA;
stroke-miterlimit: 10;
}
/* mobile map */
.map-graphic-mobile {
display: flex;
align-items: flex-start;
justify-content: center;
}
ul.mobile_map_list {
background-color: #2D2D2D;
font-size: 1.8rem;
line-height: 3rem;
text-align: center;
padding: 2rem;
margin: 0;
list-style: none;
}
ul.mobile_map_list li a {
text-decoration: none;
color: #fff;
}
ul.mobile_map_list li a:hover {
background-color: #2D2D2D;
color: var(--green);
}
/* Labels */
.label {
display: inline-block;
padding: 10px 20px;
margin: 10px;
position: absolute;
border: none;
background-color: transparent;
cursor: pointer;
color: #fff;
opacity: 0.7;
}
.label.selected {background-color: #000; opacity: 1;}
#north-label {
margin-top: 30%;
margin-right: 50%;
}
#south-label {
margin-top: 80%;
margin-left: 50%;
}
/* Styling for the triangle shapes */
.triangle-right,
.triangle-left {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
}
#north-label.selected .triangle-right,
#south-label.selected .triangle-left {
display: block;
}
#north-label .triangle-right {
border-width: 8px 0 8px 12px;
border-color: transparent transparent transparent #000;
right: -12px;
display: none;
}
#south-label .triangle-left {
border-width: 8px 12px 8px 0;
border-color: transparent #000 transparent transparent;
left: -12px;
display: none;
}
/* island maps */
#north-map path,
#south-map path {
fill: #fff;
opacity: 0.7;
}
#north-map.selected path,
#south-map.selected path {
fill: #fff;
opacity: 1;
}
/* toggle map button related styles
.alt-home #map-toggle-button {
border: 1px solid black;
background-color: black;
color: white;
border-radius: 3rem;
letter-spacing: 0.5px;
padding: 0.7rem 1.5rem;
font-weight: 500;
cursor: pointer;
transition: 0.2s all;
}
.alt-home #map-toggle-button svg {
vertical-align: middle;
}
#map.is-hidden {
display: none;
}*//* carousel */
#carousel {
position: relative;
overflow: hidden;
line-height: 0;
height: 100%;
padding: 0;
}
#carousel::after {
content: '';
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.carousel-container {
display: flex;
transition: transform 1s ease;
}
.carousel-slide {
flex: 0 0 100%; /* Ensure each slide takes full width */
}
.html-section .carousel-slide img {
width: 100%;
margin: 0;
}
/* left and right navigation (hidden) */
.prev,
.next {
position: absolute;
top: 0;
background-color: red;
cursor: pointer;
height: 94.5%;
width: 10%;
z-index: 1;
opacity: 0;
}
.prev {
left: 0;
}
.next {
right: 0;
}
/* slide indicators */
.carousel-dots {
position: absolute;
bottom: 5%;
left: 50%;
transform: translateX(-50%); /* Corrects horizontal centering */
z-index: 1;
}
.dot {
display: inline-block;
width: 10px;
height: 10px;
background-color: #ccc;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
/* active slide indicator */
.dot.active {
opacity: 100%;
}
/* inactive slide indicator */
.dot:not(.active) {
opacity: 50%;
}
@media screen and (max-width: 36em) {.search-box input{font-size: 80%;}}
/* fixes stacking with carousel */
.cookies-preferences-section-overlay {z-index: 2;}/* fix clear button being too round after AI search added to system */
.clear-search-button {
position: absolute;
top: 0;
right: 0;
border: none;
height: 100%;
border-radius: 0 0.5rem 0.5rem 0;
padding: 0 1rem;
}
/* fix sort alignment */
.assets-found p {margin: 0;}